<template>
  <q-dialog
    v-model="userSelectDig"
    @before-show="
      () => {
        f5()
      }
    "
  >
    <q-card>
      <q-item>
        <q-input
          dense
          class="w-100%"
          rounded
          v-model="pageParam.query"
          type="text"
          label="搜索用户"
          outlined
        />
      </q-item>
      <q-scroll-area style="width: 370px; height: 414px">
        <q-item
          clickable
          v-for="item in rows"
          :key="item.id"
          @click="
            () => {
              newChat(item.id)
            }
          "
        >
          <q-item-section top avatar>
            <q-avatar size="38px">
              <q-img error-src="/images/default-avatar.png" :src="item.avatar" :ratio="1 / 1" />
            </q-avatar>
          </q-item-section>
          <q-item-section>
            <q-item-label>
              {{ item.username }}
            </q-item-label>
            <q-item-label caption lines="1">
              {{ item.summary }}
            </q-item-label>
          </q-item-section>
        </q-item>
        <q-item v-show="loading">
          <q-item-section top avatar>
            <q-skeleton type="QAvatar" size="32px" />
          </q-item-section>
          <q-item-section>
            <q-item-label><q-skeleton type="text" /></q-item-label>
            <q-item-label caption lines="1">
              <q-skeleton type="text" />
            </q-item-label>
          </q-item-section>
        </q-item>
        <q-item v-show="!loading && pageParam.recordCount == 0">
          <q-item-section class="text-center"> 无用户 </q-item-section>
        </q-item>
        <div class="row justify-center" v-if="pageParam.totalPage > 1">
          <q-btn
            dense
            :loading="loading"
            flat
            :disable="pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage"
            :label="pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多'"
            @click="
              () => {
                pageParam.pageNum++
                load()
              }
            "
          />
        </div>
      </q-scroll-area>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { receiveUser, userSelectDig } from './shared'
import type { ApiType } from 'src/service/api'
import { chatNew, chatSelectUser } from 'src/service/api/chat'

const pageParam = ref({
  query: '',
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
})

const newChat = (userId: string) => {
  chatNew({ userId }).then(({ data, error }) => {
    if (!error) {
      receiveUser.value = data.chatUser
      emit('new-chat', data)
      userSelectDig.value = false
    }
  })
}

type chatNewType = ApiType<typeof chatNew>['Return']

const emit = defineEmits<{
  (e: 'new-chat', newChatUser: chatNewType): void
}>()

type rowType = ApiType<typeof chatSelectUser>['Return']['rows'][0]
const rows = ref<Array<rowType>>([])

const loading = ref(false)

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  load()
}

const load = () => {
  loading.value = true
  chatSelectUser(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      rows.value.push(...data.rows)
      pageParam.value.pageNum = data.pageNum
      pageParam.value.pageSize = data.pageSize
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
    }
  })
}
</script>

<style scoped></style>
